<template>
  <div class="box">
    <div class="querybox">
      <el-input
        v-model="query"
        placeholder="请输入查询内容"
        style="width: 50%;"
      />
      <el-button
        type="primary"
        @click="submitForm('ruleForm')"
      >查询</el-button>
    </div>

    <el-table
      :data="tableData"
      border
    >
      <el-table-column
        prop="name"
        label="姓名"
      />
      <el-table-column
        prop="phone"
        label="电话"
      />
      <el-table-column
        prop="city"
        label="市区"
      />
      <el-table-column
        prop="address"
        label="地址"
      />
      <el-table-column
        prop="zip"
        label="邮编"
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="updUser(scope.row, scope.index)"
          >修改</el-button>
          <el-button
            type="text"
            size="small"
            @click="delUser(scope.row, scope.index)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="用户信息"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
      >
        <el-form-item
          label="姓名"
          prop="username"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.username"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="电话"
          prop="phone"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.phone"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="closeDialogForm('form')"
        >确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
// import DropdownMenu from '@/components/Share/DropdownMenu'

export default {
  name: 'Channel',
  // components: { DropdownMenu },
  data() {
    return {
      form: {
        phone: '',
        username: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ]
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        phone: '18513101690',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        phone: '18513101690',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        phone: '18513101690',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        phone: '18513101690',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }],
      formLabelWidth: '120px',
      dialogFormVisible: false,
      query: ''
    }
  },
  methods: {
    // 删除用户
    delUser(row, index) {
      console.log(row)
      this.tableData.splice(row, 1)
      this.$message({
        message: '删除成功！',
        type: 'success'
      })
    },
    // 修改用户
    updUser(row, index) {
      this.dialogFormVisible = true
    },
    // 弹窗关闭触发函数
    closeDialogForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false
          this.$message({
            message: '修改成功！',
            type: 'success'
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  margin: 20px 30px;
  .form {
    margin-top: 50px;
  }
  .querybox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
}
</style>
